import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import avatar from "../assets/back.jpg";
import { getArticle } from "../store/actions/article";
import { RootState } from "../types/store";
export default function Article() {
  const dispatch = useDispatch();
  const {
    channel: { active },
    article: { articles },
  } = useSelector((state: RootState) => state);
  useEffect(() => {
    dispatch(getArticle(active));
  }, [dispatch, active]);
  return (
    <div className="list">
      {articles.map((item) => (
        <div className="article_item" key={item.art_id}>
          <h3 className="van-ellipsis">{item.title}</h3>
          <div className="img_box">
            <img src={item.cover.images?item.cover.images[0]:avatar} className="w100" alt="" />
          </div>
          <div className="info_box">
            <span>{item.aut_id}</span>
            <span>{item.comm_count}评论</span>
            <span>{item.pubdate}</span>
          </div>
        </div>
      ))}
    </div>
  );
}
